<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style>
	#fat{
		width: 500px;
		height: 500px;
		background-color: rgba(0,0,0,.2);
	}
		ul{
			list-style: none;
			padding: 0;
		}
		li{
			line-height: 30px;
			text-align: center;
			cursor: pointer;
		}
		li.active{
			background-color: rgba(100,100,100,.4);
		}
		#content{
			height: 100px;
		}
		#content div{
			/*height: 100px;*/
			display: none;
		}
		/*#content div:first-child{
			display: block;
		}*/
	</style>
</head>
<body>
<div id="fat">
	<ul id="cont">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<div>
		<div id="content">
			<div>第一部分内容</div>
			<div>第二部分内容</div>
			<div>第三部分内容</div>
			<div>第四部分内容</div>
		</div>
	</div>
</div>
<script src="./js/jquery-3.2.1.js"></script>
<script src="./js/tab.js"></script>
<script>
	$(function(){
		$("#fat").tabs({
			t:	"#cont li",
			c:	"#content div",
			s:	"active",
			m:	"mouseover",
			i:	"2"
		})
	})
</script>
</body>
</html>